{include file="common/header" /}
<div class="container-page-easy-memory">
    <div class="wfix">
        <?php if($activity_list): ?>
            <?php foreach($activity_list as $item): ?>
                <div class="box-poem-activity">
                    <div class="title"><label>活动名称：</label><span><?php echo $item['activity_name'] ?></span></div>
                    <div class="activity-time">
                        <i class="fa fa-clock-o"></i><?php echo $item['start_time'] ?>~<?php echo $item['end_time'] ?>
                        <span class="activity-status-label status-<?php echo $item['status_text'] ?>"><?php echo $item['status_text_cn'] ?></span>
                    </div>
                    <?php foreach($item['plan_list'] as $planItem): ?>
                    <div class="box-poem-plan">
                        <div class="content">
                            <div class="left">
                                <div class="poem-title"><?php echo $planItem['poem_title']; ?></div>
                                <div class="poem-dynasty"><span><?php echo $planItem['dynasty']; ?>·<?php echo $planItem['poet']; ?></span></div>
                                <div><?php echo $planItem['poem_content']?></div>
                            </div>
                            <div class="right">
                                <div class="tab-container">
                                    <div class="box-tab">
                                        <span class="tab current" data="1" >注释</span>
                                        <span class="tab" data="2" >译文</span>
                                        <span class="tab" data="3" >赏析</span>
                                        <span class="tab" data="4" >背景</span>
                                    </div>
                                    <div id="content_1" class="tab-content active"><?php echo $planItem['annotation']; ?></div>
                                    <div id="content_2" class="tab-content"><?php echo $planItem['translation']; ?></div>
                                    <div id="content_3" class="tab-content"><?php echo $planItem['appreciation']; ?></div>
                                    <div id="content_4" class="tab-content"><?php echo $planItem['background']; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                    <button data-clockin_activity_id="<?php echo $item['id'] ?>" class="btn-join-clockin-activity">我要加入</button>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>
<script>
    $(function(){
        $(".tab").click(function(){
            var nowItem = $(this);
            var tabId = nowItem.attr("data");
            nowItem.siblings(".tab").removeClass("current");
            nowItem.addClass("current");
            $(".tab-content").removeClass("active");
            $("#content_" + tabId).addClass("active");
        });

        $(".btn-join-clockin-activity").click(function(){
            var nowItem = $(this);
            var clockinActivityId = nowItem.data("clockin_activity_id");
            $.ajax({
                url: '/api/ClockinActivityUser/joinClockinActivity',
                async: false,
                type:'post',
                data:{clockin_activity_id: clockinActivityId},
                success:function(resp){
                    if( 1 == resp.code ){
                        // layer.msg(resp.message);
                    }else{
                        nowItem.after('<span>' + resp.message + '</span>');
                    }
                }
            });
        });
    });
</script>
{include file="common/footer" /}